<template>
  <div class="dashboard-container" v-if="bol">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 面包屑 -->
        <div v-if="this.$route.query.id">
          <el-breadcrumb
            separator-class="el-icon-arrow-right"
            style="padding: 10px 0"
          >
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{
              this.$route.query.name
            }}</el-breadcrumb-item>
            <el-breadcrumb-item>目录管理</el-breadcrumb-item>
          </el-breadcrumb>
          <hr />
        </div>
        <!-- 搜索 -->
        <el-form :model="requestParameters" ref="requestParameters">
          <div class="filter-container">
            <el-row :gutter="16">
              <el-col :span="6">
                <el-form-item label="目录名称" prop="directoryName">
                  <el-input
                    @keyup.enter="handleFilter"
                    style="width: 180px"
                    placeholder="请输入"
                    class="filter-item"
                    v-model="searchList.directoryName"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="状态：" prop="state">
                  <el-select
                    class="filter-item"
                    style="width: 195px"
                    v-model="searchList.state"
                    @keyup.enter="handleFilter"
                  >
                    <el-option
                      v-for="item in status"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <el-button size="small" @click="resetForm">清除</el-button>
                  <el-button
                    size="small"
                    type="primary"
                    icon="el-icon-search"
                    @click="handleFilter"
                    >搜索</el-button
                  >
                  <!-- <el-button class="filter-item" size="small" type="primary" @click="resetForm">重置</el-button> -->
                </el-form-item>
              </el-col>
              <div>
                <el-button
                  class="filter-item fr"
                  size="small"
                  style="margin-left: 10px"
                  @click="handleChange('add')"
                  type="primary"
                  icon="el-icon-edit"
                  >新增目录</el-button
                >
                <el-button
                  class="filter-item fr"
                  v-if="isShow"
                  type="text"
                  @click="$router.push('/subjects/list')"
                  ><i class="el-icon-back"></i>返回学科
                </el-button>
              </div>
            </el-row>
          </div>
        </el-form>
        <!-- 数据记录 -->
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
        <!-- end -->
        <!-- 数据列表 -->
        <el-table
          :key="tableKey"
          :data="dataList"
          v-loading="listLoading"
          element-loading-text="给我一点时间"
          fit
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column
            align="center"
            label="序号"
            type="index"
            width="80px"
          >
          </el-table-column>
          <el-table-column align="center" label="所属学科">
            <template slot-scope="scope">
              <span>{{ scope.row.subjectName }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="目录名称">
            <template slot-scope="scope">
              <span>{{ scope.row.directoryName }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建者">
            <template slot-scope="scope">
              <span>{{ scope.row.username }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建日期">
            <template slot-scope="scope">
              <span>{{ scope.row.addDate | parseTime }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="面试题数量">
            <template slot-scope="scope">
              <span>{{ scope.row.totals }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.state == 1">已启用</span>
              <span v-else>禁用</span>
            </template>
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column
            align="center"
            label="操作"
            width="200"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                @click="handleStatus(scope.row)"
              >
                <span v-if="scope.row.state == 0">启用</span>
                <span v-else>禁用</span>
              </el-button>
              <el-button
                :disabled="scope.row.state == 1"
                type="text"
                size="mini"
                @click="handleChange(scope.row.id)"
                >修改</el-button
              >
              <el-button
                :disabled="scope.row.state == 1"
                v-if="scope.row.status != 'deleted'"
                size="mini"
                type="text"
                @click="removeUser(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->
        <!-- 分页 -->
        <div class="pagination">
          <div class="pages">
            <el-pagination
              v-if="total > requestParameters.pagesize || !$route.query.id"
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="Number(requestParameters.page)"
              :total="Number(total)"
              :page-size="Number(requestParameters.pagesize)"
              :page-sizes="[2, 10, 20, 30, 50]"
              layout="->,sizes,pager, next, jumper "
            ></el-pagination>
          </div>
        </div>
        <!-- end -->
        <!-- 新增标签弹层 -->
        <Dialog
          ref="editUser"
          :titleInfo="titleInfo"
          @gitList="getList()"
          :formData="formData"
        ></Dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { status } from '@/api/hmmm/constants'
// import { list as lists } from '@/api/hmmm/subjects'
import { list, changeState, remove, detail } from '@/api/hmmm/directorys'
import Dialog from '@/module-hmmm/components/directorys-add.vue'
export default {
  name: 'CompanysList',
  components: {
    Dialog
  },
  data () {
    return {
      status,
      bol: true,
      isShow: false,
      tableKey: 0,
      dataList: [],
      total: null,
      listLoading: true,
      alertText: '',
      searchList: {
        directoryName: '',
        state: null
      },

      requestParameters: {
        page: 1,
        pagesize: 10
      },
      titleInfo: {
        pageTitle: '目录', // 页面标题
        text: '' // 新增、编辑文本
      },
      formData: {
        directoryName: ''
        // subjectID: ''
      }
    }
  },
  computed: {
    // status () {
    //   return status
    // }
  },
  methods: {
    // 初始数据
    initialDate () {
      // 读取数据
      this.getList()
    },
    // 获取列表数据
    async getList (params) {
      this.listLoading = true
      const { data: res } = await list(this.requestParameters)
      // console.log(res, 'list')
      // 获取数据给dataList
      this.dataList = res.items
      // 获取总条数
      this.total = res.counts
      this.alertText = `共 ${this.total} 条记录`
      this.listLoading = false
    },
    // 重置
    resetForm () {
      this.$refs.requestParameters.resetFields()
      this.requestParameters.page = 1
      this.searchList = {
        directoryName: '',
        state: null
      }

      this.getList()
    },
    // 搜索信息
    handleFilter () {
      this.requestParameters.directoryName = this.searchList.directoryName
      this.requestParameters.state = this.searchList.state
      this.requestParameters.page = 1
      this.getList()
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.requestParameters.pagesize = val
      if (this.requestParameters.page === 1) {
        this.getList(this.requestParameters)
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      if (this.requestParameters.directoryName) {
        if (
          this.requestParameters.directoryName !== this.searchList.directoryName
        ) {
          this.searchList.directoryName = this.requestParameters.directoryName
        }
      }
      this.requestParameters.page = val
      this.getList()
    },

    // **********************************
    // 搜索的项目
    // 添加、编辑之后表单清空
    query () {
      this.formData = {}
    },
    // 新增用户、编辑用户
    handleChange (id) {
      if (this.isShow === true) {
        this.$refs.editUser.isShow = false
      }
      this.query()
      this.$refs.editUser.dialogFormV()
      if (id === 'add') {
        this.titleInfo.text = '创建' // 给弹层传参
        if (this.$route.query.id) {
          this.hanldeEditForm(this.$route.query.id, id)
        }
      } else {
        this.titleInfo.text = '编辑' // 给弹层传参
        this.hanldeEditForm(id, '')
      }
    },
    // 窗口操作**********************************
    // 编辑
    // 表单详情数据加载
    async hanldeEditForm (objeditId, qu) {
      this.formData.id = objeditId
      const { data: res } = await detail({ id: objeditId })
      // 获取详情 给formData
      this.formData = res
      if (qu === 'add') {
        this.formData = {
          directoryName: '',
          subjectID: this.$route.query.id - 0
        }
      }
      // console.log(this.formData, 'foe')
    },
    // 删除
    removeUser (user) {
      this.$confirm('确认删除?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: user })
            .then((response) => {
              this.$message.success('删除成功' + '!')
              this.dataList.splice(user, 1)
              this.getList(this.requestParameters)
            })
            .catch((response) => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 启用、禁用
    async handleStatus (val) {
      if (val.state === 0) {
        val.state = 1
      } else {
        val.state = 0
      }
      await changeState(val)
      // const state = await changeState(val)
      this.$message.success('切换成功')
      // console.log(val, '启用')
      // console.log(state)
    }
  },
  // 挂载结束
  mounted: function () {},
  // 创建完毕状态
  async created () {
    // console.log(this.$route.query.id, '11')
    var _this = this
    this.initialDate()
    // 判断是否带参数跳转
    if (this.$route.query.id || this.$route.query.name) {
      this.bol = false
      this.isShow = true
      this.requestParameters.subjectID = this.$route.query.id
      const { data: res } = await list(this.requestParameters)
      this.dataList = res.items
      // console.log(res, '111')
      this.$nextTick(() => {
        this.bol = true
      })
    }
    // 键盘enter操作
    document.onkeydown = function (e) {
      var key = window.event.keyCode
      if (key === 13) {
        _this.handleFilter(this.requestParameters)
      }
    }
  },
  // 组件更新
  updated: function () {}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-table td.is-center,
.el-table th.is-center {
  text-align: left;
}
::v-deep .el-table th.is-leaf {
  text-align: left;
}
::v-deep .fixed-width .el-button--mini {
  padding: 0px;
  width: 30px;
}
::v-deep .el-form-item {
  margin-bottom: 0px;
}
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
}
</style>

<style>
.el-table th {
  background-color: #fafafa;
}
.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8;
}
.disabled td {
  background-color: #f9f9f9;
  color: #c1c1c1;
}
.disabled .el-button--primary,
.disabled .el-button--danger {
  background-color: #dbdada;
  border: 1px solid #dbdada;
  color: #999;
  cursor: not-allowed;
}
</style>
